<template>
  <div>
    <h1>
      自提点申请
      <van-tag round type="danger" v-if="0 == stationInfo.status">审核中</van-tag>
      <van-tag round type="success" v-if="1 == stationInfo.status">审核通过</van-tag>
      <van-tag round type="danger" v-if="2 == stationInfo.status">审核失败</van-tag>
    </h1>

    <van-cell-group :loading="loading">
      <van-field v-model="stationInfo.name" label="自提点名称" placeholder="自提点名称" />
      <van-field
        readonly
        clickable
        name="area"
        :value="addressjoin()"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-field v-model="stationInfo.detailAddress" label="详细地址" placeholder="详细地址" />
    </van-cell-group>

    <van-button round type="primary" block @click="onSave" v-if="stationInfo.id">修改</van-button>
    <van-button round type="primary" block @click="onSave" v-else>确认</van-button>

    <van-popup v-model="showArea" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="columns"
        @cancel="showArea = false"
        :loading="loading"
        @change="onchangeArea"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { create, getStation } from "@/api/station";
import { cnareaList } from "@/api/cnarea";

export default {
  data() {
    return {
      loading: false,
      edit: false,
      stationInfo: {},
      columns: [{}, {}, {}],
      searchResult: [],
      loading: false,
      showArea: false
    };
  },
  created() {
    this.getStation();
    this.getcnareaList(0, 0);
  },
  methods: {
    addressjoin() {
      return (
        this.stationInfo.province +
        " " +
        this.stationInfo.city +
        " " +
        this.stationInfo.region
      );
    },
    onchangeArea(picker, values, index) {
      this.getcnareaList(index + 1, values[index].areaCode);
    },
    onConfirm(values) {
      this.stationInfo.province = values[0].name;
      this.stationInfo.city = values[1].name;
      this.stationInfo.region = values[2].name;
      this.stationInfo.address = values.map(item => item.name).join("/");
      this.showArea = false;
    },

    onSave() {
      this.$dialog.confirm({
        title: "温馨提示",
        message: "修改信息后需要重新审核后才能使用，是否修改？"
      }).then(() => {
        create(this.stationInfo)
          .then(() => {
            this.loading = false;
            this.$toast("操作成功");
          })
          .catch(e => {
            this.loading = false;
          });
      });
    },
    onChangeDetail() {},
    getcnareaList(index, parentCode) {
      if (index > 2) {
        return;
      }
      this.loading = true;
      cnareaList({ parentCode: parentCode })
        .then(response => {
          this.loading = false;
          this.columns[index].values = response.data;
          this.loading = false;
        })
        .catch(e => {
          this.loading = false;
        });
    },
    getStation() {
      getStation()
        .then(response => {
          this.loading = false;
          this.stationInfo = response.data;
        })
        .catch(e => {
          this.loading = false;
        });
    }
  }
};
</script>
<style scoped>
.van-button--block {
  width: 90%;
  margin: 5%;
}
</style>